<template>
  <div>
    <van-nav-bar
      title="不凡"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group>
      <van-field v-model="searchVal" placeholder="搜索" class="city" />
    </van-cell-group>
    <div class="container">
      <ul>
        <li
          v-for="item in list"
          :key="item.uid"
          @click="goHome(item)"
          class="address"
        >
          {{ item.title }}地址{{ item.address }}
        </li>
      </ul>
    </div>
    <div id="allmap"></div>
  </div>
</template>
item.address
<script>
import { mapMutations, mapState } from "vuex";
export default {
  props: {},
  data() {
    return {
      searchVal: "",
      map: "",
      list: [],
    };
  },
  computed: {
    ...mapState(["cityInfo"]),
  },
  created() {},
  mounted() {
    var map = new BMap.Map("allmap"); // 创建Map实例
    if (this.cityInfo.city) {
      // 初始百度地图的中心点
      map.centerAndZoom(
        new BMap.Point(this.cityInfo.point.lng, this.cityInfo.point.lat),
        11
      );
      var mk = new BMap.Marker(this.cityInfo.point);
      map.addOverlay(mk);
      map.panTo(this.cityInfo.point);
    } else {
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(
        function (r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
          } else {
            alert("failed" + this.getStatus());
          }
        },
        { enableHighAccuracy: true }
      );
    }

    this.map = map;
  },
  watch: {
    searchVal() {
      var _this = this;
      var options = {
        onSearchComplete: function (results) {
          // 判断状态是否正确
          if (local.getStatus() == BMAP_STATUS_SUCCESS) {
            console.log(results);
            _this.list = results.Hr;
          }
        },
      };
      var local = new BMap.LocalSearch(this.map, options);
      local.search(this.searchVal);
    },
  },
  methods: {
    onClickLeft() {
      this.$router.push("/home");
    },
    ...mapMutations(["addCity"]),
    goHome(val) {
      this.addCity(val);
      this.$router.push("/home");
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.city {
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  color: #323233;
  background-color: #fff;
}
#allmap {
  width: 100%;
  height: 400px;
}
.container {
  width: 100%;
  height: 250px;
  overflow: auto;
}
.address {
  font-size: 14px;
  padding: 10px 30px;
  text-align: left;
}
</style>
